<template>
  <a-drawer
    v-model:visible="visible"
    title="规则详情"
    :width="1000"
    @before-open="handleOpen">
    <a-form :model="formState" auto-label-width>
      <a-form-item label="规则名称">{{ formState.name ?? '' }}</a-form-item>
      <a-form-item v-if="type === 2" label="触发条件"
        >当计数值在 {{ parseTimeDisplay(formState.module_config?.cycle) }}内超过
        {{ formState.module_config?.count }} 次触发执行策略</a-form-item
      >
      <a-form-item label="匹配规则">
        <matching-rule-view
          ref="matchingView"
          v-model="ruleGroups"
          disabled-all
          class="w-full"></matching-rule-view>
      </a-form-item>
      <a-form-item v-if="type === 3" label="执行策略">
        <span v-if="whiteSkip">
          跳过
          {{ whiteSkip }}
          模块
        </span>
        <span v-else>-</span>
      </a-form-item>
      <a-form-item v-else label="执行策略">
        {{ getOptionsLabel(wafCustomOptions, formState.action ?? 1) }}
      </a-form-item>
      <a-form-item v-if="type === 2" label="持续时间"
        >{{ parseTimeDisplay(formState.module_config?.duration) }}
      </a-form-item>
      <template
        v-if="
          type !== 3 &&
          formState.action !== 3 &&
          formState.action !== 4 &&
          formState.action !== 5
        ">
        <a-form-item label="响应类型">
          {{
            getOptionsLabel(
              RESPONSE_TYPE_LIST,
              formState.response_page?.type ?? A_RESPONSE_TYPE.DEFAULT
            )
          }}</a-form-item
        >
        <a-form-item label="响应代码">{{
          formState.response_page?.code
        }}</a-form-item>
        <a-form-item
          v-if="formState.response_page?.type !== A_RESPONSE_TYPE.DEFAULT"
          label="响应内容">
          <span
            class="text-primary cursor-pointer"
            @click="previewWithNewPage(formState.response_page!.body!)"
            >预览效果</span
          >
        </a-form-item>
      </template>
    </a-form>
    <!-- 
    <ViewContent
      v-model="contentVisible"
      :content="formState.response_page?.body"></ViewContent>
    -->
    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
import type { wafRuleDetails } from '@/apis/model/waf'
import { getApiWafApi } from '@/apis/modules/waf'
import type { IMatchingGroup } from '@/components/MatchingRule/types'
import { getFieldValue } from '@/components/MatchingRule/utils'
import {
  A_RESPONSE_TYPE,
  RESPONSE_TYPE_LIST,
  wafCustomOptions
} from '@/constants'
import { getOptionsLabel } from '@/utils'
import { v4 as uuidV4 } from 'uuid'
// import ViewContent from './ViewContent.vue'

interface IProps {
  type: number
  ruleId: string
}
const visible = defineModel<boolean>({ required: true })
// const { visible: contentVisible, open } = usePopup()
const props = withDefaults(defineProps<IProps>(), {
  ruleId: ''
})
const formState = ref<wafRuleDetails>({})
/**
 * 当前所选择的字段配置项
 */
const ruleGroups = ref<IMatchingGroup[]>([
  {
    uuid: uuidV4(),
    rules: [
      {
        uuid: uuidV4(),
        field: '',
        operator: '',
        value: '',
        custom_field: ''
      }
    ]
  }
])

const handleOpen = () => {
  getApiWafApi({ id: props.ruleId }).then((res) => {
    formState.value = res as wafRuleDetails
    ruleGroups.value[0].rules =
      res.conditions?.map((item) => {
        return {
          uuid: uuidV4(),
          ...item,
          value:
            getFieldValue(item)!.count > 1 ? item.value : item.value.toString()
        }
      }) ?? []
  })
}

const whiteSkip = computed(() => {
  const skips: number[] = formState.value.module_config?.skip_module ?? []
  return skips
    ?.map((item) => getOptionsLabel(skipModuleOptions, item))
    .join('，')
})
const parseTimeDisplay = computed(() => (time?: string) => {
  if (!time) return ''
  const unit = time.slice(-1)
  const num = parseInt(time.slice(0, -1))

  return `${num} ${getOptionsLabel(cacheTimeOptions, unit)}`
})
const handleClose = () => {
  visible.value = false
}
</script>
<style lang="less" scoped>
.arco-drawer {
  .arco-form {
    :deep(.arco-form-item-label) {
      color: var(--color-text-4) !important;
    }
    :deep(.arco-row) {
      .arco-form-item-content,
      .arco-form-item-wrapper-col {
        min-height: 20px;
      }
    }
  }
}
</style>
